Angular-js

How to implement function in angulaJs on document.ready?

How to implement function in angulaJs on document.ready?, someone asked me to explain?

In this article I will show you to implement function in angularjs using angular.element. We can use document.ready() method as jQuery function and implement as our way.

We should include AngularJs script file and Script.js goes in to the Html Page.  You should add ng-app attribute to the root element of Html and use AngularJs ng-controller of the view.

Script.js


///<reference path="../angular.min.js" />
angular.module('MyApp', [])
.controller('myController', [function () {
    angular.element(document).ready(function () {
        document.getElementById('divMsg').innerHTML = 'Hello world';
   });
}]);

Html Page:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>angularjs function</title>
    <script src="Scipts/angular.min.js"></script>
    <script src="Scipts/Apps/Script.js"></script>
</head>
<body style="border:1px solid gray;width:500px;height:300px" >
    <h1>angularjs function</h1>
    <div data-ng-app="MyApp">
        <div data-ng-controller="myController">
            <div id="divMsg"></div>
        </div>
    </div>
</body>
</html>

Here I used html element to print ‘hello world’ string as shown below.

Output:

function in angularjs

Post your comments / questions